“SmartStart WP - Responsive HTML5 Theme” Documentation by “Smuliii”

SmartStart WP - Responsive HTML5 Theme

Created: 6.4.2012
By: Samuli Saarinen
Follow me on: Twitter

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. You can also follow me on Twitter and Themeforest to keep track of all my theme updates and future themes. Thanks so much! :)

Table of Contents

  1. Installation
    1. First Steps
    2. Upload the Theme
    3. Active the Theme
    4. Install & Setup Plugins (optional)
    5. Upload Dummy Content (optional)
    6. Setup Theme Options
    7. Setup Menu & Reading Settings
    8. Setup Widgets
  2. Using the Theme
    1. Shortcodes
    2. Page/Post Settings
    3. Post Formats
    4. Portfolio
    5. Sliders
    6. Team
  3. CSS Files & Structure
  4. Javascript Plugins/Scripts
  5. PSDs
  6. Sources and Credits
  7. Changelog

A) Installation - top

First of all, if you haven't worked with Wordpress ever before, I would recommend to learn a little about it and get to know it first, before heading to this documentation:

In case you're not interested to read the documentation, here's also a small screencast of the installation process:

How to install and setup SmartStart WP - Responsive HTML5 Theme

A. 1) First Steps

Before you can start playing around with your new theme, let's first check what the theme package includes. After you have downloaded the .zip file from Themeforest and unzipped it, its should reveal the following folders:

A. 2) Upload the Theme

You have two options how to upload themes in Wordpress and I will cover them both now. You can either upload all theme files via FTP or you can use Wordpress Theme Uploader. It really doesn't matter at all which one of these techniques you want to use, so choose the one which seems to make more sense to you.

Theme Uploader:

  1. So of course first you need to login into Wordpress backend.
  2. Find Appearance from left sidebar, open it and click Themes.
  3. Now you click link called Install Themes.
  4. In the next page, just under Install Themes link, there is an another link called Upload, click that.
  5. Now you just need to find the SmartStart WP folder, which you just unzipped, and in there go to www-zip folder and select smartstart.zip file.
  6. Then just click Install now and Wordpress will handle the rest!

FTP:

So I assume you do know how to use your FTP client of choice (like Filezilla), but if you don't, then try Theme Uploader technique.

  1. First login o your FTP account and navigate to your Wordpress installation directory and in there go to wp-content\themes folder.
  2. Now put FTP client to side for a while and head back to SmartStart WP folder, which you just unzipped, and in there go to www folder.
  3. There should be only one folder, called smartstart. To make sure you are in the right place, check that folder contains files like index.php, functions.php and style.css.
  4. If everything looks good you are ready to upload this smartstart folder to wp-content\themes, which you found earlier.

If you face any problems during the installation, I'd recommend to check this screencast: Solving Broken Theme Issues.

A. 3) Active the Theme

After theme is successfully uploaded, head on to Appearance » Themes, in Wordpress backend. There should be now one new theme called SmartStart WP - Responsive HTML5 Theme. Find it and just click Activate.

A. 4) Install & Setup Plugins (optional)

These steps are totally optional, so if you don't need Google Maps or contact form, you can easily just Dismiss the Notice and skip to the next step.

So at this stage you have probably noticed a warning sign, asking you to install recommended plugins. Now it's time for that! And this is extremely simple, since you just need to click Begin installing plugins and you will be redirected to plugin installation page where you can install the plugins you want.

Google Maps made Simple Plugin

I'm not going to teach how to use this plugins because you can find its extensive documentation from plugin's homepage.

To have fullwidth map, you will need to wrap the map shortcode with [fullwidth_map] ... [/fullwidth_map] shortcode.

Contact Form 7

Contact From 7 provides excellent documentation at its own so I will only guide how to setup a simple form. The actually plugin installation process is just like installing the Google Maps made Simple Plugin. So after it's done, you will find new link called Contact from bottom of the sidebar. You can check Contact From 7 docs and create all different sort of forms with this plugin, but here is the basic form from the demo site:

<p class="input-block">
    <label for="your-name"><strong>Name</strong> (required)</label>[text* your-name id:your-name]
</p>

<p class="input-block">
    <label for="your-email"><strong>Email</strong> (required)</label>[email* your-email id:your-email]
</p>

<p class="input-block">
    <label for="your-subject"><strong>Subject</strong></label>[text your-subject id:your-subject]
</p>

<p class="textarea-block">
    <label for="your-message"><strong>Your Message</strong> (required)</label>[textarea* your-message id:your-message]
</p>

[submit "Send Message"]

A. 5) Upload Dummy Content (optional)

Be aware that downloading Dummy Content may take a while, depending on the speed of your internet connection!

If this is your first time with Wordpress platform or if you just want to get use to the theme, you may want to first just play around with it. And in that situation Dummy Content is excellent choice! With this single file you should get almost identically result like in demo site. But of course you can easily just skip this step, if you don't want any unnecessary extra content to your site.

  1. First go to Tools » Import and in there choose Wordpress.
  2. If you haven't imported anything before, you will need to install Importer plugin. So install it and once it's done you can activate it.
  3. Now click Browse and navigate to SmartStart WP folder. In there go to Dummy Content folder and select smartstart-dummy-content.xml file and click Upload file and import.
  4. Before submitting it, you may also want to check Download and import file attachments checkbox.
  5. And now you just need to wait. Importing can take a while, but it will save a whole lot of your time so just be patient.

A. 6) Setup Theme Options

Theme has its own unbranded Theme Options panel, which can be found under the Apperance tab. There you can set some basic settings like logo, color scheme and social links. But before you start adjusting different settings, you should first click Save Options button to insert all default data to the database. This will just ensure that everything looks good.

A. 7) Setup Menu & Reading Settings

From now on I assume that you have at least some content on your site. If not, you should create few pages before you can continue.

Setup the Menu

At first you need to create the main menu, go to Appearance » Menus and create one (if you imported Dummy Content, it already exist). Now you will need to attach it into the theme in Theme Locations (upper left box).

You have also option to give main menu items a little description. If you can't see the Description field, you can enable it by clicking Screen Options in top right corner and then checking the Description checkbox.

More info about Wordpress menus can be found from here: Appearance Menus Screen.

Reading Settings

Now is also good time to set site Front page and Posts page in Settings » Reading Settings page.

A. 8) Setup Widgets

This theme comes with four custom widget, which are really easy to use.

Smart Contact Info

This widget shows the contact info and it's meant to be used in Left Footer Widget Area. The widget can be configured in Theme Options (Social Media).

Smart Flickr Feed

This widget allows you to show latest images from any Flickr account or group. You can find your Flickr ID at http://idgettr.com/. Feed will be updated once in a hour.

Smart Social Links

This widget shows the social links and it's meant to be used in Right Footer Widget Area. The widget can be configured in Theme Options (Social Media).

Smart Twitter Feed

This widget allows you to show latest tweets from any Twitter account. You have also option to Ignore Replies, so you can show only the actual tweets. And feed will be updated once in a hour.

B) Using the Theme - top

B. 1) Shortcodes

Theme comes with dozens custom shortcodes to help you out in building the site. All those are easily accesible straight from the post editor, just by clicking the new Insert Shortcode button (green icon with + sign). It will launch the Shortcode Manager where you can select shortcode and configure it, before inserting to a post.

shortcodes

If you ever have any visual problems with any shortcode, always try first to wrap it inside of [raw] ... [/raw] shortcode to remove WP editor formatting. Usually that will do the trick.

How to create a frontpage in SmartStart WP - Responsive HTML5 Themee

B. 2) Page/Post Settings

In every page and post, you can overwrite the Site Structure setting and choose custom page layout just for that page.

In regular pages you have also option to use custom page title and descriptions, or just disable page header completely if you don't need it.

How to use page settings in SmartStart WP - Responsive HTML5 Theme

B. 3) Post Formats

In case you haven't used Post Formats before, you may want to check what they really are and what they are meant to do: http://codex.wordpress.org/Post_Formats

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

The Link, Quote, Video and Audio posts have few an extra box for their fields, just under the post editor.

How to use post formats in SmartStart WP - Responsive HTML5 Theme

Standard

This is the default format for all the posts.

Aside

Usually post without a title. So for example great for a little note.

Gallery

To create image gallery slider, you just need to add some image attachments to the post by clicking Add Media button in post editor.

Link

The post title will be linked to external site.

Image

In Standard post, clicking the featured image just links to the post, but in Image post it will launch lightbox to view zoomed image.

Quote

Quote posts also allows you to have regular content, but it will shown only in single page.

Video

You have option to either use the custom HTML5 video player (with Flash fallback) or to use external embed code.

Audio

Just like with Video post, you can either use custom HTML5 audio player (with Flash fallback) or to use external embed code.

B. 4) Portfolio

Creating a new project is pretty same as creating new post. You can decide will the content be positioned to the left, to the right or to below the slider. But remember that you can use column shortcodes only if there isn't a "sidebar". And the featured image will be used as a thumbnail for the portfolio page (and for projects carousel).

Just like with Post Formats, you have option to use images, custom videos or audios in the slider. But if you select Custom Slide Type, you can basically have any content you want. Also, there may be a cases when the slider quite simple won't allow some embed code to work properly, so in that case you can disable the actual JavaScript part. But you can still add/remove slides as you normally would.

How to create a new project in SmartStart WP - Responsive HTML5 Theme

B. 5) Sliders

You can easily create multiple slider with custom Slider Manager. Every slider has its own settings for transitions etc. and they can be found from right side of the page.

You can get the shortcode for the slider from the Slider listing page. You can also insert sliders with the Shortcode Manager.

How to create a new slider in SmartStart WP - Responsive HTML5 Theme

B. 6) Team

Creating a new Team member is really simple task. The featured image will be used as a photo and the content for the little description. You have also option to give a job title and set social links.

You can get the shortcode for the team member from the Team listing page. You can also insert team members with the Shortcode Manager.

How to create a new team member in SmartStart WP - Responsive HTML5 Theme

B) CSS Files & Structure - top

As you can see, theme doesn't have separate CSS file for IE, but unfortunately this doesn't mean that there wouldn't be any IE specific css rules. Theme has three custom class for this purpose: .ie7, .ie8 and .not-ie. .ie7 is just for IE7, .ie8 for IE8 and older and .not-ie is for any other browser except IE8 and older.

Here is simple list where you can find every section with ease in style.css file:

  1. Reset & Clearfix - Line 12
  2. Basic Elements & Classes - Line 35
  3. Generic Classes - Line 274
  4. Lists - Line 302
  5. Alert Boxes - Line 343
  6. Forms - Line 380
  7. Wrap - Line 448
    1. Columns - Line 458
  8. Header - Line 479
    1. Main Navigation - Line 496
  9. Content - Line 632
    1. Page Header - Line 640
    2. Main - Line 693
      1. Columns - Line 709
    3. Image Gallery Slider - Line 723
    4. Widgets - Line 497
      1. Accordion Content - Line 798
      2. Content Tabs - Line 856
    5. Pricing Tables - Line 914
      1. Simple Pricing Table - Line 954
      2. Extended Pricing Table - Line 1073
    6. Back to Top - Line 1211
  10. Home - Line 1238
    1. Slider - Line 1242
      1. Single Slide - Line 1261
      2. Button - Line 1313
      3. Content - Line 1423
      4. Pagination - Line 1531
      5. Active Slide Bar - Line 1609
    2. Projects Carousel - Line 1624
    3. Post Carousel - Line 1711
    4. Projects & Post Carousel Navigation - Line 1765
  11. Our Team - Line 1814
  12. Blog - Line 1886
    1. Comments - Line 1987
    2. Respond - Line 2087
    3. Pagination - Line 2131
  13. Portfolio - Line 2172
    1. Single Project - Line 2260
  14. Contact Us - Line 2321
  15. Sidebar - Line 2388
    1. Widgets - Line 2399
      1. List - Line 2413
      2. Recent Comments - Line 2436
      3. Calendar - Line 2445
      4. RSS - Line 2500
      5. Search - Line 2513
      6. Accordion Content - Line 2519
      7. Tweets - Line 2547
      8. Flickr Images - Line 2580
  16. Footer - Line 2610
    1. Footer Navigation - Line 2668
    2. Contact Info - Line 2699
    3. Social Links - Line 2738
  17. Footer Bottom - Line 2877
  18. Media Queries - Line 2910
    1. Standard 960 or larger (browsers) - Line 2914
    2. Smaller than standard 960 (devices and browsers) - Line 3038
    3. Tablet Portrait size to standard 960 (devices and browsers) - Line 3167
    4. All Mobile Sizes (devices and browser) - Line 3352
    5. Mobile Landscape Size to Tablet Portrait (devices and browsers) - Line 3624
    6. Mobile Portrait Size to Mobile Landscape Size (devices and browsers) - Line 3728

C) Javascript Plugins/Scripts - top

All Javascript files are located in js folder. By default theme uses minified version of the all scripts to reduce page loading times and to save your site bandwidth, but you can also find uncompressed version from the same folder.

  1. modernizr.custom.js - A small JavaScript library that detects the availability of native implementations for next-generation web technologies
  2. video-js.min.js - HTML5 Video, Now Available Everywhere
  3. selectivizr-and-extra-selectors-min.js - CSS3 pseudo-class and attribute selectors for IE 6-8
  4. respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries
  5. jquery.easing-1.3.min.js - More easing options for sliders
  6. jquery.fancybox.pack.js - Fancy lightbox alternative
  7. jquery.cycle.all.js - A slideshow plugin that supports many different types of transition effects
  8. jjquery.smartStartSlider.min.js - The homepage slider
  9. jquery.jcarousel.min.js - jQuery plugin for controlling a list of items in horizontal or vertical order
  10. jquery.isotope.min.js - An exquisite jQuery plugin for magical layouts
  11. audioplayerv1.min.js - A simple and elegant looking HTML5/Flash audio playing solution with some thoughtful features
  12. jquery.touchSwipe-1.2.5.min.js - jQuery plugin to be used on touch input devices such as iPad, iPhone etc.
  13. custom.js - All Javascript settings & custom scripts

Here is simple list where you can find every section with ease in js/custom.js file:

  1. Custom Functions - Line 7
  2. Detect Touch Device - Line 54
  3. Main Navigation - Line 70
  4. Min-height - Line 115
  5. Fancybox - Line 128
  6. Projects Carousel & Post Carousel - Line 182
  7. Image Gallery Slider - Line 308
  8. Portfolio Filter - Line 422
  9. VideoJS - Line 503
  10. FitVids - Line 561
  11. AudioPlayerV1 - Line 636
  12. Accordion Content - Line 708
  13. Content Tabs - Line 743
  14. UItoTop (Back to Top) - Line 778
  15. Fullwidth Google Maps - Line 832

F) PSDs - top

All .psd files are located in _PSD folder.

  1. Home (homepage.psd)
  2. Sliders (sliders.psd)
  3. About (about-us.psd)
  4. We Are Hiring (hiring.psd)
  5. Our Team (team.psd)
  6. Pricing Tables (pricing_table.psd)
  7. Portfolio (portfolio.psd)
  8. Single Project (portfolio-detail.psd)
  9. Blog (blog.psd)
  10. Single Post (blog-detail.psd)
  11. Contact (contact-us.psd)
  12. Back to Top button (back-to-top.psd)

G) Source and Credits - top

People and their links who I wanna thank to.

  1. jQuery Plugins/Scripts
  2. PHP Scripts
  3. Icons

H) Changelog - top

v1.04 - 19.4.2012

v1.03 - 11.4.2012

v1.02 - 10.4.2012

v1.01 - 9.4.2012

v1.0 - Initial version

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Samuli Saarinen

Go To Table of Contents